<template>
  <div class="mine">
    <div class="user-head">
      <div class="user-head-l">
        <div class="head-text" style="width:15%">
          创建日期
        </div>
        <div class="head-date">
          <el-date-picker v-model="queryList.startTime" @change="startTimeStatus" :picker-options="pickerOptionsStart" type="date" placeholder="开始日期">
          </el-date-picker>
        </div>
        <div class="head-text">
          至
        </div>
        <div class="head-date">
          <el-date-picker v-model="queryList.endTime" @change="endTimeStatus" :picker-options="pickerOptionsEnd" type="date" placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="user-head-r">
        <div class="head-r-l">
          <div class="head-input">
            <el-input v-model="queryList.queryData" placeholder="名称查询"> </el-input>
          </div>
          <div class="head-button" @click="getUserData(queryList)">
            查询
          </div>
          <div class="">
            <el-select v-model="app_idHome" v-if="showSelect" placeholder="请选择应用类型" @change="getSelectHome(app_idHome)">
              <el-option v-for="item in optionsAppid" :key="item.app_id" :label="item.name" :value="item.app_id"> </el-option>
            </el-select>
          </div>
        </div>
        <div class="head-r-r head-button" @click="exportClick">
          导出
        </div>
      </div>
    </div>
    <div class="mine-con">
      <el-table
        :selectable="true"
        v-loading="loading"
        ref="pageData.tableData"
        :data="pageData.tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column type="selection" show-overflow-tooltip header-align="center" min-width="1"> </el-table-column>
        <el-table-column prop="sign_id" label="文件ID" show-overflow-tooltip min-width="2"> </el-table-column>
        <el-table-column label="文件名称" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建日期" show-overflow-tooltip min-width="2"> </el-table-column>
        <el-table-column prop="update_time" label="更新日期" show-overflow-tooltip min-width="2"> </el-table-column>
        <el-table-column prop="user_count" label="签署人次" show-overflow-tooltip min-width="1"> </el-table-column>
        <el-table-column prop="result" label="文件状态" show-overflow-tooltip min-width="1">
          <template slot-scope="scope">
            <p v-show="scope.row.result == '1'" style="color:#1D84FE">已签署</p>
            <p v-show="scope.row.result == '0'" style="color:#EDBE17">待签署</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip header-align="center" min-width="2">
          <template slot-scope="scope" id="operation">
            <el-button @click="downloadClick(scope.row)">下载</el-button>
            <el-button @click="imgPdf(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange"
            :pager-count="5"
            @current-change="handleCurrentChange"
            :page-size="pageData.pageSize"
            layout="prev, pager, next, jumper"
            :total="pageData.total"
            :current-page.sync="pageData.currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 查看的弹框 -->
    <el-dialog title="" class="pdfshow" :visible.sync="pdfshow" width="60%">
      <div id="ppd"></div>
      <i @click="pddIcon" class="el-icon-close pdd-icon"></i>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import pdf from 'pdfobject'
// import pdf from 'vue-pdf'
export default {
  name: 'Sign',
  data() {
    return {
      formLabelWidth: '120px',
      optionsTree: [], // 三级联动
      area_name: [],
      options: [],
      queryList: {
        startTime: '', //查询的时候的开始时间
        endTime: '', //查询的时候结束时间
        queryData: '' //查询信息
      },
      labelPosition: 'right', // 表单在一行
      loading: false,
      pageData: {
        tableData: [],
        currentPage: 1, //当前的页数
        pageSize: 10, //每一页存放的数据条数
        total: 0
      },
      contList: {}, //内容数据
      dialogFormAdd: false, //新增弹框
      dialogFormEdit: false, //修改弹框
      pdfshow: false, //查看用户信息
      //一下是当前操作某条数据的时候比如增加的时候要记录 修改的时候也要记录
      editList: {}, // 修改用户信息
      addUser: {
        // 新增用户
        user_name: '',
        area_code: [],
        user_number: '',
        user_phone: '',
        user_mailbox: ''
      },
      // 刚进页面获取appid
      app_idHome: '',
      optionsAppid: [],
      httpUrl: 'http://192.168.1.10/api', // 请求头
      // 时间选择器校验
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.queryList.endTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.queryList.startTime
          if (beginDateVal) {
            return time.getTime() < new Date(beginDateVal).getTime()
          }
        }
      },
      // appid显示与隐藏
      showSelect: false
    }
  },
  methods: {
    // 切换应用
    getSelectHome(val) {
      // console.log(val)
      this.app_idHome = val
      this.getUserData()
    },
    // 时间选择器起始时间校验
    // 时间开始选择器
    startTimeStatus(value) {
      this.queryList.startTime = value
    },
    // 时间结束选择器
    endTimeStatus(value) {
      this.queryList.endTime = value
    },
    // 获取三级联动最后一个元素
    handleChange(value) {
      console.log(value)
    },
    //数据单选
    toggleSelection(rows) {
      console.log(rows)
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //全选和全不选
    handleSelectionChange(val) {
      console.log(val)
    },
    //点击左右跳转页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageData.currentPage = val
    },
    //点击跳转对应的页码
    handleCurrentChange(val) {
      console.log(val)
      this.pageData.currentPage = val
      this.getUserData()
    },
    // 查看pdf
    imgPdf(item) {
      this.pdfshow = true
      this.$nextTick(function() {
        console.log(`${this.httpUrl}/web/file/examine-file-api?access_token=${this.token}&fileId=${item.file_id}`)
        pdf.embed(`${this.httpUrl}/web/file/examine-file-api?access_token=${this.token}&fileId=${item.file_id}`, '#ppd')
      })
    },
    // 关闭pdf
    pddIcon() {
      this.pdfshow = false
    },
    // 导出Excel
    async exportClick() {
      if (this.app_idHome) {
        window.open(`${this.httpUrl}/web/sign/export_excel?access_token=${this.token}&appId=${this.app_idHome}`)
      } else {
        this.$message({
          message: '暂无数据！',
          type: 'error'
        })
      }
    },
    //获取用户列表信息以及查询功能
    async getUserData(query = '') {
      // 获取列表数据
      console.log(query)
      this.loading = true
      // 搜索时，页码需要设置为1，才能正确返回数据，因为数据是从第一页开始返回的
      query ? (this.pageData.currentPage = 1) : ''
      const params = {
        app_id: this.app_idHome,
        page: this.pageData.currentPage,
        size: 10,
        begin_time: query.startTime,
        end_time: query.endTime,
        name: query.queryData
      }
      const nums = JSON.stringify(params)
      const data = await this.http.post(`/web/sign/sign_list?access_token=${this.token}`, nums)
      console.log(data)
      this.loading = false
      if (data.result_code == '0') {
        const res = data.data
        this.pageData.tableData = res.records
        this.pageData.total = res.total
      }
    },
    // 下载
    async downloadClick(item) {
      console.log(item)
      // console.log(item.status)
      if (item.file_id) {
        window.open(`${this.httpUrl}/web/file/download-file-api?access_token=${this.token}&fileId=${item.file_id}`)
      } else {
        this.$message({
          message: '系统错误！',
          type: 'error'
        })
      }
    },
    // 获取appid
    async addId() {
      //获取用户Id
      const data = await this.http.get(`/web/app/appId?access_token=${this.token}&userId=${this.userid}`)
      // console.log(data)
      if (data.result_code == '0') {
        this.optionsAppid = data.data.app
        this.app_idHome = this.optionsAppid[0].app_id
        this.getUserData()
        if (this.optionsAppid.length !== 0) {
          this.showSelect = true
        } else {
          this.showSelect = false
        }
      }
    }
  },
  mounted() {
    this.addId()
  },
  computed: {
    ...mapState({
      userid: modules => modules.login.loginList.developer_id,
      token: modules => modules.login.loginList.token
    })
  }
}
</script>
<style scoped lang="scss">
.activeShow {
  display: none;
}
.activeBut {
  background: #fff600;
  // pointer-events: none;
}
/deep/.el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border: 1px solid #c0c4cc;
}
#edit-but {
  /deep/.el-button--default {
    width: 100px;
  }
  /deep/.el-button + .el-button {
    margin-left: 50px;
  }
}

// 修改X号
/deep/.el-dialog__headerbtn {
  top: 12px;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  color: 20px;
}
/deep/.dialog-footer {
  text-align: center;
}
/deep/.el-dialog__header {
  padding-top: 10px;
}
/deep/.el-pager li {
  border: 1px solid #dcdfe6;
}
/deep/.el-pager li.active + li {
  border-left: 1px solid #dcdfe6;
}
/deep/ .el-pagination.is-background .el-pager li {
  background-color: #ffffff;
  color: #999999;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #23b769;
  color: #fff;
  border: 1px solid #23b769;
}
/deep/.el-button + .el-button {
  margin-left: 15px;
}
/deep/.el-button {
  width: 71px;
}
/deep/.el-button {
  padding: 8px 5px;
}
/deep/.el-button:hover {
  background: #23b769;
  color: #fff;
}
.mine {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .user-head {
    // height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px 40px 20px 50px;
    .user-head-l {
      width: 40%;
      display: flex;
      align-items: center;
      .head-date {
        width: 35%;
        /deep/.el-input__inner {
          background: rgba(235, 248, 236, 1);
          border-radius: 6px;
          border: 1px solid rgba(35, 183, 105, 1);
          font-size: 18px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: 1px;
        }
        /deep/.el-input__prefix {
          // right: -79%;
          .el-icon-date {
            font-size: 20px;
          }
        }
      }
      .head-text {
        font-size: 18px;
        font-family: NotoSansHans-Regular, NotoSansHans;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        letter-spacing: 1px;
        margin: 0 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .head-text:nth-child(1) {
        margin-left: 0;
      }
    }
    .user-head-r {
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .head-button {
        width: 100px;
        height: 40px;
        background: rgba(35, 183, 105, 1);
        border-radius: 6px;
        margin: 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
      }
      .head-r-l {
        display: flex;
        align-items: center;
        width: 60%;
        .head-input {
          /deep/.el-input__inner {
            background: rgba(235, 248, 236, 1);
            border-radius: 6px;
            border: 1px solid rgba(35, 183, 105, 1);
            font-size: 18px;
            color: rgba(102, 102, 102, 1);
            letter-spacing: 1px;
          }
        }
      }
    }
  }
  .mine-con {
    margin-top: 8px;
    // flex: 1;
    /deep/.el-table {
      max-height: 650px;
      height: 650px;
      overflow-y: auto;
    }
    .page {
      padding: 20px 0;
      display: flex;
      justify-content: center;
      background-color: #fff;
    }
  }
  /deep/#add {
    .el-dialog {
      width: 35%;
    }
    /deep/.el-input__inner {
      // border: 0;
    }
    .el-dialog__header {
      .el-dialog__headerbtn {
        top: 11px;
        .el-icon-close {
          font-size: 30px;
          font-weight: 600;
          color: #999999;
        }
      }
    }
    .el-dialog__body {
      padding-bottom: 25px;
      .el-form-item {
        .el-select {
          width: 60%;
          .el-input {
            width: 100%;
          }
        }
        .el-form-item__label {
          width: 30%;
          padding-right: 20px;
          font-size: 18px;
          color: rgba(102, 102, 102, 1);
          letter-spacing: 1px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .el-input {
          width: 60%;
          background: rgba(235, 248, 236, 1);
          border-radius: 6px;
          border: 1px solid rgba(35, 183, 105, 1);
          input {
            font-size: 18px;
            color: rgba(212, 209, 209, 1);
            letter-spacing: 1px;
          }
        }
      }
      .el-form-item.phone {
        .el-form-item__content {
          display: flex;
          align-items: center;
          .el-input {
            width: 65%;
          }
          .send {
            width: 16%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 4%;
            cursor: pointer;
            height: 100%;
            background: rgba(35, 183, 105, 1);
            border-radius: 6px;
            font-size: 18px;
            color: rgba(255, 255, 255, 1);
            letter-spacing: 1px;
          }
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      padding-bottom: 30px;
    }
  }
  /deep/.el-dialog {
    width: 35%;
    .el-dialog__body {
      padding-bottom: 30px;
    }
  }
  // 查看的弹框的样式
  #dialogTable {
    width: 95%;
    margin: 0 auto;
    padding-bottom: 10%;
    tr > td {
      font-size: 18px;
      font-weight: 400;
      padding: 10px 20px;
      letter-spacing: 1px;
      border: 1px solid rgba(216, 216, 216, 1);
    }
    tr > td:nth-child(2n) {
      width: 60%;
      color: rgba(63, 190, 113, 1);
    }
    tr > td:nth-child(2n-1) {
      width: 40%;
      color: rgba(136, 136, 136, 1);
    }
  }
}
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  .close-btn {
    position: absolute;
    top: 5%;
    right: 10%;
    i {
      display: block;
      color: rgba(255, 255, 255, 1);
      font-size: 50px;
      font-weight: 500;
    }
  }
  .btn {
    width: 25px;
    height: 25px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    cursor: pointer;
    border-bottom-left-radius: 5px;
  }
  .btn-l {
    transform: rotate(45deg);
    margin-right: 2%;
  }
  .btn-r {
    transform: rotate(-135deg);
    margin-left: 2%;
  }
  .btn-grey {
    border-left: 4px solid rgba(175, 175, 175, 1);
    border-bottom: 4px solid rgba(175, 175, 175, 1);
  }
  .dialog-imgs {
    width: 33%;
    height: 80%;
    .dialog-img {
      position: relative;
      width: 100%;
      height: 95%;
      box-sizing: border-box;
      background-color: #fff;
      img {
        width: 100%;
        height: 100%;
      }
      i.el-icon-download {
        display: block;
        position: absolute;
        right: 3%;
        bottom: 3%;
        z-index: 1000;
        color: rgba(224, 224, 224, 1);
        font-size: 30px;
        cursor: pointer;
      }
    }
    .dialog-page {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 5%;
      width: 100%;
      height: 5%;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      letter-spacing: 1px;
    }
  }
}
/deep/.el-dialog.is-fullscreen {
  height: 86%;
  margin-top: 3%;
}
/deep/.el-dialog__body {
  padding: 0;
}
// 查看弹框
/deep/.pdfshow {
  .el-dialog {
    height: 80%;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      height: 100%;
      #ppd {
        height: 100%;
      }
      .pdd-icon {
        color: #fff;
        font-size: 30px;
        position: absolute;
        top: 0;
        right: -10%;
      }
    }
  }
}
// 表格
/deep/.el-table th {
  background: #f7ffe9;
}
//表格的地边框去掉
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
//表格的高度
/deep/ .el-table tr {
  height: 68px;
}
/deep/.el-checkbox__inner {
  width: 18px;
  height: 18px;
}
/deep/.el-checkbox__inner::after {
  border: 2px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 11px;
  left: 5px;
  position: absolute;
  top: 0px;
  width: 6px;
}
// 选中表格的样式
/deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff;
  border: 1px solid #979797;
}
</style>
